<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Managed IFrame Panel</title>
	<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.1/resources/css/ext-all.css" />
	<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/ext-all.js"></script>
	<script type="text/javascript" src="multidom.js"></script>
	<script type="text/javascript" src="mif.js"></script>
  
	<script type="text/javascript" >
		Ext.onReady(function(){
			var vIFrame = new Ext.ux.ManagedIFramePanel({
					id: 'mif'
				,	defaultSrc: 'Sample.html'
				,	height: 400
				,	width: 700
				,	style: "margin:  50px"
				,	autoScroll: true
				,	renderTo: 'test'
				,	title: 'Managed IFrame Panel'
				,	listeners: {
						documentloaded: function(frame) {
							console.log("Document Loaded", frame);
							frame.unmask();
							addIframeListeners(frame);
						}
					}
		});
		
		addIframeListeners = function(frame) {
			var el = frame.getDoc();
			// disbale right click
			el.on("contextmenu", Ext.emptyFn, null, {preventDefault: true}); 
			// right click menu for span
			el.on('contextmenu', function(e, targetEl){
				var pXY = this.getXY();
				var xy = e.getXY();
				console.log(xy, pXY, e.getPoint() );
				if(this.menu) this.menu.destroy();
				this.menu = new Ext.menu.Menu({
					items: [{
							text: 'Do Something'
						,	scope: targetEl
						, handler: function(btn, e) {
								console.log("Something", this, btn, e);
							}
					}]
				});
				this.menu.showAt(xy);
			}, frame, {
					delegate: 'span.test'
				,	stopEvent: true
			});
			
			// disable link inside mif
			el.on('click', function(event, target) {
				event.stopEvent();
			}, this, {delegate: 'a'});
			
			// tooltip over span
			el.on('mouseover', function(e,el1) {
            	var title = document.createAttribute('title');
				title.nodeValue = "This is mouse over effect";
				el1.attributes.setNamedItem(title);
        	}, this,{delegate: 'span.test'});
				
		}

	});
	</script>
	</head>
	<body>
  	<div id="test"></div>
	</body>
</html>
